<template>
  <div class="addForm_for">
    <el-form ref="formDataRef" :model="formData" :rules="rules" label-width="120px" style="padding-bottom: 85px;" scroll-to-error>
      <el-row id="essential_information">
        <el-col :span="24" class="fontWeight600"> 基本信息 </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="商品名称" prop="styleName">
            <el-input v-model="formData.styleName" clearable maxlength="50" placeholder="请输入商品名称"
              @input="(e: string) => { forbidRule(e, 'styleName', 'blank') }" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="卖点" prop="sellingPoints">
            <el-input v-model="formData.sellingPoints" clearable placeholder="请输入卖点" type="textarea" maxlength="189"
              :rows="4" show-word-limit @input="(e: string) => { forbidRule(e, 'sellingPoints', 'emoji') }" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="规格/材质" prop="specs">
            <el-input v-model="formData.specs" clearable placeholder="请输入规格/材质" type="textarea" maxlength="200"
              :rows="4" show-word-limit @input="(e: string) => { forbidRule(e, 'specs', 'emoji') }" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="商品图片" prop="productImage">
            <ImageUploadDrags v-model="formData.productImage" :limit="5" :format="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row id="cooperation_information">
        <el-col :span="24" class="fontWeight600"> 合作信息 </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <div class="taxClassName">
            <el-form-item label="平台扣点" prop="tax" class="taxClassName_flex" style="flex: 1;">
              <el-input v-model="formData.tax" clearable placeholder="请输入平台扣点">
                <template #append>%</template>
              </el-input>
            </el-form-item>
            <img src="@/assets/images/depot/icon_kongxinwenhao.png" alt="" class="taxClassName_img"
              @click="isTaxRule = true" />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="fontWeight600"> 机制1： </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="合作方式" prop="cooperationMode">
            <el-select v-model="formData.cooperationMode" clearable filterable placeholder="请选择合作方式"
              @change="mechanismChange('1')">
              <el-option v-for="item in hm_cooperation_mode" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="售价" :prop="formData.cooperationMode === '供货' ? '' : 'price'">
            <el-input v-model="formData.price" clearable placeholder="请输入售价"
              :disabled="formData.cooperationMode === '供货'" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="佣金" :prop="formData.cooperationMode === '供货' ? '' : 'commission'">
            <el-input v-model="formData.commission" clearable :disabled="formData.cooperationMode === '供货'"
              placeholder="请输入佣金">
              <template #append>%</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="直播机制" prop="liveStreamingMechanism">
            <el-input v-model="formData.liveStreamingMechanism" clearable placeholder="请输入直播机制" maxlength="12"
              @input="(e: string) => { forbidRule(e, 'liveStreamingMechanism', 'blank') }" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="补充佣金" prop="brokerage">
            <el-input v-model="formData.brokerage" clearable :disabled="formData.cooperationMode === '供货'"
              placeholder="请输入补充佣金">
              <template #append>%</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="成本价" prop="costPrice">
            <el-input v-model="formData.costPrice" clearable :disabled="formData.cooperationMode === '分佣'"
              placeholder="请输入成本价" />
          </el-form-item>
        </el-col>
      </el-row>

      <div v-if="mechanismArr.indexOf(2) !== -1" style="position: relative;">
        <div class="delete_mechanism">
          <el-image class="delete" :src="icon_shanchu" @click="handleDelete(2)"></el-image>
        </div>
        <el-row>
          <el-col :span="24" class="fontWeight600"> 机制2： </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="合作方式" prop="cooperationMode2">
              <el-select v-model="formData.cooperationMode2" clearable filterable placeholder="请选择合作方式"
                @change="mechanismChange('2')">
                <el-option v-for="item in hm_cooperation_mode" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="售价" :prop="formData.cooperationMode2 !== '供货' ? 'price2' : ''">
              <el-input v-model="formData.price2" clearable
                :disabled="!formData.cooperationMode2 || formData.cooperationMode2 === '供货'" placeholder="请输入售价" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="佣金" :prop="formData.cooperationMode2 !== '供货' ? 'commission2' : ''">
              <el-input v-model="formData.commission2" clearable placeholder="请输入佣金"
                :disabled="!formData.cooperationMode2 || formData.cooperationMode2 === '供货'">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="直播机制" prop="liveStreamingMechanism2">
              <el-input v-model="formData.liveStreamingMechanism2" clearable placeholder="请输入直播机制" maxlength="12"
                @input="(e: string) => { forbidRule(e, 'liveStreamingMechanism2', 'blank') }"
                :disabled="!formData.cooperationMode2" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="补充佣金" prop="brokerage2">
              <el-input v-model="formData.brokerage2" clearable placeholder="请输入补充佣金"
                :disabled="!formData.cooperationMode2 || formData.cooperationMode2 === '供货'">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成本价" prop="costPrice2">
              <el-input v-model="formData.costPrice2" clearable placeholder="请输入成本价"
                :disabled="!formData.cooperationMode2 || formData.cooperationMode2 === '分佣'" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div v-if="mechanismArr.indexOf(3) !== -1" style="position: relative;">
        <div class="delete_mechanism">
          <el-image class="delete" :src="icon_shanchu" @click="handleDelete(3)"></el-image>
        </div>
        <el-row>
          <el-col :span="24" class="fontWeight600"> 机制3： </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="合作方式" prop="cooperationMode3">
              <el-select v-model="formData.cooperationMode3" clearable filterable placeholder="请选择合作方式"
                @change="mechanismChange('3')">
                <el-option v-for="item in hm_cooperation_mode" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="售价" :prop="formData.cooperationMode3 !== '供货' ? 'price3' : ''">
              <el-input v-model="formData.price3" clearable placeholder="请输入售价"
                :disabled="!formData.cooperationMode3 || formData.cooperationMode3 === '供货'" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="佣金" :prop="formData.cooperationMode3 !== '供货' ? 'commission3' : ''">
              <el-input v-model="formData.commission3" clearable placeholder="请输入佣金"
                :disabled="!formData.cooperationMode3 || formData.cooperationMode3 === '供货'">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="直播机制" prop="liveStreamingMechanism3">
              <el-input v-model="formData.liveStreamingMechanism3" clearable placeholder="请输入直播机制" maxlength="12"
                @input="(e: string) => { forbidRule(e, 'liveStreamingMechanism3', 'blank') }"
                :disabled="!formData.cooperationMode3" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="补充佣金" prop="brokerage3">
              <el-input v-model="formData.brokerage3" clearable placeholder="请输入补充佣金"
                :disabled="!formData.cooperationMode3 || formData.cooperationMode3 === '供货'">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成本价" prop="costPrice3">
              <el-input v-model="formData.costPrice3" clearable placeholder="请输入成本价"
                :disabled="!formData.cooperationMode3 || formData.cooperationMode3 === '分佣'" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="add_mechanism_div" v-if="mechanismArr.length < 3">
        <el-button type="primary" :icon="Plus" @click="addMechanism(mechanismArr.length + 1)"
          class="add_mechanism">补充机制</el-button>
      </div>
      <div class="btn_tow_box">
        <el-row>
          <el-col :span="24">
            <el-button type="primary" :loading="buttonLoading" @click="submitForm(formDataRef)">提交</el-button>
            <el-button @click="resetForm(formDataRef)">取消</el-button>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
  <Point v-if="isTaxRule" @close="isTaxRule = false" />
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import Point from '@/views/group/investDepartment/commodityManage/addform/compoments/point.vue'
import icon_shanchu from '@/assets/images/icon_shanchu.png'
import { type Action } from 'element-plus'
import { changeAudit } from '@/api/group/product';
const { proxy } = getCurrentInstance() as any;
const { hm_cooperation_mode } = toRefs<any>(proxy?.useDict('hm_cooperation_mode'));
const isTaxRule = ref(false)
const formDataRef = ref()
const mechanismArr = ref([1])
const props = defineProps(['isChangeList'])
const emit = defineEmits(['close', 'submit'])
const buttonLoading = ref(false);
const formData = ref<any>({
  styleName: "",
  specs: "",
  sellingPoints: "",
  productImage: "",
  tax: '',

  cooperationMode: "",
  price: "",
  costPrice: "",
  liveStreamingMechanism: "",
  commission: "",
  brokerage: "",

  cooperationMode2: "",
  price2: "",
  costPrice2: "",
  liveStreamingMechanism2: "",
  commission2: "",
  brokerage2: "",

  cooperationMode3: "",
  price3: "",
  costPrice3: "",
  liveStreamingMechanism3: "",
  commission3: "",
  brokerage3: "",

})

// 输入事件、禁用规则
const forbidRule = (e: string, key: string, type: string) => {
  // 输入法表情默认不能输入
  if (type == 'emoji') {
    // emoji：输入时禁用输入法表情
    formData.value[key] = e.replace(/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\u00A9|\u00AE|\u3030/gi, '')
  } else if (type == 'blank') {
    // blank：输入时禁用空格
    formData.value[key] = e.replace(/\s|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\u00A9|\u00AE|\u3030/gi, '')
  }
}
// 平台扣点效验，佣金校验
const validatorcommission = (ruls: any, val: string) => /^(([1-9]?\d(\.\d{1,2})?)|100|100.00)$/.test(val);
// 售价效验
const validatorNumber = (ruls: any, val: string) => {
  return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
}
// 成本效验
const validatorNumbercostPrice = (ruls: any, val: string) => {
  if (formData.value.cooperationMode == '分佣') {
    if (val) {
      return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
    } else {
      return true
    }
  } else if (formData.value.cooperationMode == '') {
    return true
  } else {
    return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
  }
}
// 补充佣金校验
const validatorbrokerage = (ruls: any, val: string) => {
  if (val) {
    return /^(([1-9]?\d(\.\d{1,2})?)|100|100.00)$/.test(val);
  } else {
    return true
  }
}
// 成本价2校验
const validatorNumbercostPrice2 = (ruls: any, val: string) => {
  if (formData.value.cooperationMode2 == '分佣') {
    if (val) {
      return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
    } else {
      return true
    }
  } else if (formData.value.cooperationMode2 == '') {
    return true
  } else {
    return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
  }
}
// 成本价3校验
const validatorNumbercostPrice3 = (ruls: any, val: string) => {
  if (formData.value.cooperationMode3 == '分佣') {
    if (val) {
      return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
    } else {
      return true
    }
  } else if (formData.value.cooperationMode3 == '') {
    return true
  } else {
    return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
  }
}
const rules = ref({
  styleName: [
    { required: true, message: '请输入商品名称', trigger: 'change' },
  ],
  sellingPoints: [
    { required: true, message: '请输入卖点', trigger: 'change' },
  ],
  tax: [
    { required: true, message: '请输入平台扣点', trigger: 'change' },
    { validator: validatorcommission, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
  ],
  cooperationMode: [
    { required: true, message: '请选择合作方式', trigger: 'change' },
  ],
  price: [
    { required: true, message: '请输入售价', trigger: 'change' },
    { validator: validatorNumber, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
  ],
  costPrice: [
    { required: true, message: '请输入成本价', trigger: 'change' },
    { validator: validatorNumbercostPrice, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
  ],
  liveStreamingMechanism: [
    { required: true, message: '请输入直播机制', trigger: 'change' },
  ],
  commission: [
    { required: true, message: '请输入佣金', trigger: 'change' },
    { validator: validatorcommission, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
  ],
  brokerage: [
    { validator: validatorbrokerage, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
  ],

  cooperationMode2: [
    { required: true, message: '请选择合作方式', trigger: 'change' },
  ],
  price2: [
    { required: true, message: '请输入售价', trigger: 'change' },
    { validator: validatorNumber, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
  ],
  costPrice2: [
    { required: true, message: '请输入成本价', trigger: 'change' },
    { validator: validatorNumbercostPrice2, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
  ],
  liveStreamingMechanism2: [
    { required: true, message: '请输入直播机制', trigger: 'change' },
  ],
  commission2: [
    { required: true, message: '请输入佣金', trigger: 'change' },
    { validator: validatorcommission, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
  ],
  brokerage2: [
    { validator: validatorbrokerage, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
  ],

  cooperationMode3: [
    { required: true, message: '请选择合作方式', trigger: 'change' },
  ],
  price3: [
    { required: true, message: '请输入售价', trigger: 'change' },
    { validator: validatorNumber, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
  ],
  costPrice3: [
    { required: true, message: '请输入成本价', trigger: 'change' },
    { validator: validatorNumbercostPrice3, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
  ],
  liveStreamingMechanism3: [
    { required: true, message: '请输入直播机制', trigger: 'change' },
  ],
  commission3: [
    { required: true, message: '请输入佣金', trigger: 'change' },
    { validator: validatorcommission, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
  ],
  brokerage3: [
    { validator: validatorbrokerage, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
  ],
  specs: [
    { required: true, message: '请输入规格/材质', trigger: 'change' },
  ],
})
// 机制选择合作方式清除其余数据
const mechanismChange = (key: string) => {
  if (key === '1') {
    formData.value.price = ''
    formData.value.costPrice = ''
    formData.value.liveStreamingMechanism = ''
    formData.value.commission = ''
    formData.value.brokerage = ''
    formDataRef.value.clearValidate('price')
    formDataRef.value.clearValidate('costPrice')
    formDataRef.value.clearValidate('liveStreamingMechanism')
    formDataRef.value.clearValidate('commission')
    formDataRef.value.clearValidate('brokerage')
  }
  if (key === '2') {
    formData.value.price2 = ''
    formData.value.costPrice2 = ''
    formData.value.liveStreamingMechanism2 = ''
    formData.value.commission2 = ''
    formData.value.brokerage2 = ''
    formDataRef.value.clearValidate('price2')
    formDataRef.value.clearValidate('costPrice2')
    formDataRef.value.clearValidate('liveStreamingMechanism2')
    formDataRef.value.clearValidate('commission2')
    formDataRef.value.clearValidate('brokerage2')

  }
  if (key === '3') {
    formData.value.price3 = ''
    formData.value.costPrice3 = ''
    formData.value.liveStreamingMechanism3 = ''
    formData.value.commission3 = ''
    formData.value.brokerage3 = ''
    formDataRef.value.clearValidate('price3')
    formDataRef.value.clearValidate('costPrice3')
    formDataRef.value.clearValidate('liveStreamingMechanism3')
    formDataRef.value.clearValidate('commission3')
    formDataRef.value.clearValidate('brokerage3')
  }

}
/** 删除机制 */
const handleDelete = (index: number) => {
  // 当机制二删除并且机制三也存在得情况 删除机制三 保留机制二
  if (index == 2 && mechanismArr.value.length == 3) {
    mechanismArr.value.splice(2, 1)
    formData.value.cooperationMode2 = formData.value.cooperationMode3
    formData.value.price2 = formData.value.price3
    formData.value.costPrice2 = formData.value.costPrice3
    formData.value.liveStreamingMechanism2 = formData.value.liveStreamingMechanism3
    formData.value.commission2 = formData.value.commission3
    formData.value.brokerage2 = formData.value.brokerage3

    formData.value.cooperationMode3 = ""
    formData.value.price3 = ""
    formData.value.costPrice3 = ""
    formData.value.liveStreamingMechanism3 = ""
    formData.value.commission3 = ""
    formData.value.brokerage3 = ""
  } else {
    let indexs = mechanismArr.value.indexOf(index)
    mechanismArr.value.splice(indexs, 1)
    if (index == 2) {
      formData.value.cooperationMode2 = ""
      formData.value.price2 = ""
      formData.value.costPrice2 = ""
      formData.value.liveStreamingMechanism2 = ""
      formData.value.commission2 = ""
      formData.value.brokerage2 = ""
    } else if (index == 3) {
      formData.value.cooperationMode3 = ""
      formData.value.price3 = ""
      formData.value.costPrice3 = ""
      formData.value.liveStreamingMechanism3 = ""
      formData.value.commission3 = ""
      formData.value.brokerage3 = ""
    }
  }
}
/** 补充机制 */
const addMechanism = (index: number) => {
  mechanismArr.value.push(index)
}
watchEffect(() => {
  // 监听平台扣点，售价，佣金，补充佣金，动态计算成本
  if (formData.value.cooperationMode === '分佣') {
    let costPrice = Number(formData.value.price || 0) * (1 - ((Number(formData.value.commission || 0) / 100) + (Number(formData.value.brokerage || 0) / 100) + (Number(formData.value.tax || 0) / 100)))
    formData.value.costPrice = isNaN(costPrice) ? 0 : costPrice.toFixed(2)
  }
  if (formData.value.cooperationMode2 === '分佣') {
    let costPrice2 = Number(formData.value.price2 || 0) * (1 - ((Number(formData.value.commission2 || 0) / 100) + (Number(formData.value.brokerage2 || 0) / 100) + (Number(formData.value.tax || 0) / 100)))
    formData.value.costPrice2 = isNaN(costPrice2) ? 0 : costPrice2.toFixed(2)
  }
  if (formData.value.cooperationMode3 === '分佣') {
    let costPrice3 = Number(formData.value.price3 || 0) * (1 - ((Number(formData.value.commission3 || 0) / 100) + (Number(formData.value.brokerage3 || 0) / 100) + (Number(formData.value.tax || 0) / 100)))
    formData.value.costPrice3 = isNaN(costPrice3) ? 0 : costPrice3.toFixed(2)
  }
})
// 提交
const submitForm = async (formEl: any) => {
  if (!formEl) return
  await formEl.validate(async (valid: any, fields: any) => {
    if (valid) {
      const params = { ...formData.value }
      if (params.cooperationMode == "供货") {
        delete params.price;
        delete params.commission
        delete params.brokerage
      }
      if (params.cooperationMode2 == "供货") {
        delete params.price2;
        delete params.commission2
        delete params.brokerage2
      }
      if (params.cooperationMode3 == "供货") {
        delete params.price3;
        delete params.commission3
        delete params.brokerage3
      }
      const hmMechanismsList = [
        {
          cooperationMode: params.cooperationMode,
          price: params.price,
          costPrice: params.costPrice,
          liveStreamingMechanism: params.liveStreamingMechanism,
          commission: params.commission,
          brokerage: params.brokerage,
        },
        {
          cooperationMode: params.cooperationMode2,
          price: params.price2,
          costPrice: params.costPrice2,
          liveStreamingMechanism: params.liveStreamingMechanism2,
          commission: params.commission2,
          brokerage: params.brokerage2,
        },
        {
          cooperationMode: params.cooperationMode3,
          price: params.price3,
          costPrice: params.costPrice3,
          liveStreamingMechanism: params.liveStreamingMechanism3,
          commission: params.commission3,
          brokerage: params.brokerage3,
        }
      ]
      let obj = {
        productId: formData.value.id,
        styleName: formData.value.styleName,
        specs: formData.value.specs,
        changeMechanismList: hmMechanismsList,
        sellingPoints: formData.value.sellingPoints,
        productImage: formData.value.productImage,
        tax: formData.value.tax
      }
      // 重新送审
      ElMessageBox.confirm('是否确认发起变价审批？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        callback: async (action: Action) => {
          if (action == 'confirm') {
            buttonLoading.value = true
            try {
              await changeAudit(obj);
              emit('submit')
              buttonLoading.value = false
            } catch {
              buttonLoading.value = false
            }
          }
        },
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 取消
const resetForm = (formEl: any) => {
  emit('close')
}

onMounted(async () => {
  const params = JSON.parse(JSON.stringify(props.isChangeList))
  params.hmMechanismsList.forEach((item: any, index: number) => {
    if (index === 0) {
      params.cooperationMode = item.cooperationMode
      params.price = item.price
      params.costPrice = item.costPrice
      params.liveStreamingMechanism = item.liveStreamingMechanism
      params.commission = item.commission
      params.brokerage = item.brokerage
    }
    if (index === 1 && item.cooperationMode) {
      params.cooperationMode2 = item.cooperationMode
      params.price2 = item.price
      params.costPrice2 = item.costPrice
      params.liveStreamingMechanism2 = item.liveStreamingMechanism
      params.commission2 = item.commission
      params.brokerage2 = item.brokerage
      mechanismArr.value.push(2)
    }
    if (index === 2 && item.cooperationMode) {
      params.cooperationMode3 = item.cooperationMode
      params.price3 = item.price
      params.costPrice3 = item.costPrice
      params.liveStreamingMechanism3 = item.liveStreamingMechanism
      params.commission3 = item.commission
      params.brokerage3 = item.brokerage
      mechanismArr.value.push(3)
    }
  })
  formData.value = params
})
</script>
<style lang="scss" scoped>
.addForm_for {
  flex: 1;
  min-height: 0;
  overflow-y: auto;

  .taxClassName {
    display: flex;

    .taxClassName_flex {
      flex: 1;
    }

    .taxClassName_img {
      margin-left: 15px;
      margin-top: 7px;
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
  }

  .add_mechanism_div {
    width: 100%;
    display: flex;
    justify-content: center;

    .add_mechanism {
      width: 275px;
      height: 38px;
      font-size: 16px;

    }
  }

  .delete_mechanism {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 0;
    cursor: pointer;
    z-index: 50;
  }

  .btn_tow_box {
    position: absolute;
    bottom: 10px;
    right: 20px;
  }
}
</style>
